import { PlusOutlined } from '@ant-design/icons'
import { Button, Form, message, Modal, Select, Upload } from 'antd'
import { connect } from 'dva'
import React, { Component } from 'react'
import styles from './styles.less'

function mapStateToProps({ projectModel, activityModel, campusBannerModel }) {
  return {
    projectModel: projectModel,
    activityModel: activityModel,
    campusBannerModel: campusBannerModel,
  }
}
@connect(mapStateToProps)
export default class Details extends Component {
  constructor(props) {
    super(props)
    this.state = {
      bannerImg: {}, //banner图片
      options: [], //活动下拉框
      search: {}, //修改banner的接口条件
    }
    this.formRef = React.createRef()
  }

  componentDidMount() {
    let { bannerState, detailsData } = this.props
    if (bannerState) {
      this.setState(
        {
          bannerImg: { url: detailsData?.bannerImg },
        },
        () => {
          this.formRef?.current?.setFieldValue('bannerBg', this.state.bannerImg.url)
        },
      )
    }
    this.getActivity()
  }

  componentWillUnmount() {}

  //封面图片上传
  onBannerImg = (data) => {
    if (data.file.size > 5242880) return message.error('文件大小最大为5mb！')
    const formData = new FormData()
    formData.delete('file')
    formData.append('file', data.file.originFileObj)
    if (data.file.status === 'uploading') {
      this.props.dispatch({
        type: 'projectModel/uploadFile',
        payload: {
          params: formData,
          callback: (item) => {
            // console.log(item, 'item');
            this.setState({
              bannerImg: { url: item.url },
            })
            this.formRef?.current?.setFieldValue('bannerBg', item.url)
          },
        },
      })
    }
  }

  //取消
  cancel = () => {
    this.props.onCancel()
  }

  //提交表单
  onFinish = (data) => {
    console.log(data, 'data')
    let { search } = this.state
    let { detailsData, bannerState } = this.props
    if (bannerState) {
      const obj = { ...search, bannerId: detailsData.bannerId, activityId: data.activityName, bannerImg: data.bannerBg }
      this.setState(
        {
          search: obj,
        },
        () => {
          console.log()
          this.props.updateBanner(this.state.search)
        },
      )
    } else {
      this.props.addBanner({ activityId: data.activityName, bannerImg: data.bannerBg })
    }
  }

  //删除上传的图片
  onRemove = () => {
    this.setState({ bannerImg: {} })
    this.formRef?.current?.setFieldValue('bannerBg', null)
  }

  //获取活动类别
  getActivity = () => {
    this.props.dispatch({
      type: 'campusActivityModel/getActivityAll',
      payload: {
        params: {
          page: 1,
          limit: 100,
        },
        callback: (item) => {
          console.log(item, 'item')
          let arr = []
          for (let i in item.list) {
            let obj = {
              value: item.list[i].id,
              label: item.list[i].activityName,
            }
            arr.push(obj)
          }
          this.setState({
            options: arr,
          })
        },
      },
    })
  }

  render() {
    let { isModalOpen, detailsData } = this.props
    let { bannerImg, options } = this.state
    return (
      <React.Fragment>
        <Modal
          destroyOnClose={true}
          title="banner 新增"
          footer={null}
          open={isModalOpen}
          onCancel={() => {
            this.props.onCancel()
          }}
          width={400}>
          <Form
            name="basic"
            labelCol={{
              span: 7,
            }}
            wrapperCol={{
              span: 18,
            }}
            onFinish={this.onFinish}
            ref={this.formRef}
            initialValues={{
              activityName: detailsData?.activityId,
            }}>
            <Form.Item
              label="活动名称"
              name="activityName"
              rules={[
                {
                  required: true,
                  message: '请输入活动名称!',
                },
              ]}>
              <Select
                style={{
                  width: 180,
                }}
                // onChange={this.handleChange}
                options={options}
              />
            </Form.Item>
            <Form.Item
              label="banner背景"
              name="bannerBg"
              rules={[
                {
                  required: true,
                  message: '请上传文件!',
                },
              ]}>
              <Upload
                listType="picture-card"
                onChange={this.onBannerImg}
                fileList={Object.keys(bannerImg).length > 0 ? [bannerImg] : []}
                name="file"
                accept=".jpeg,.png,.jpg"
                onRemove={this.onRemove}
                onPreview={() => {
                  window.open(bannerImg.url)
                }}
                // onPreview={onPreview}
              >
                {Object.keys(bannerImg).length <= 0 ? (
                  <div>
                    <PlusOutlined />
                    <div style={{ marginTop: 8 }}> 上传 </div>
                  </div>
                ) : null}
              </Upload>
              <div style={{ color: '#9a9a9a', marginTop: 5, fontSize: 12 }}>
                允许上传png、jpg、jpeg格式，最大允许上传5M
              </div>
            </Form.Item>
            <div className={styles.functionBtn}>
              <Button type="primary" htmlType="submit" style={{ marginRight: 10 }}>
                保存
              </Button>
              <Button onClick={this.cancel}>取消</Button>
            </div>
          </Form>
        </Modal>
      </React.Fragment>
    )
  }
}
